<!-- 顶部导航栏 -->
<template>
  <n-layout-header bordered>
    <div class="content">
      <!-- 通知信息 -->
      <div class="notice-box">
        <!-- 通知 -->
        <i class="notice iconfont icon-a-tongzhi_mian242"></i>

        <div class="scrolling-text-container">
          <!-- 通知内容 -->
          <span class="scrolling-text">本次更新了很多功能,欢迎大家使用该启动器!</span>
        </div>
      </div>


      <!-- 用户头像 -->
      <!-- <n-badge :value="9999" :max="99" :offset="offset">
          <n-avatar bordered lazy round :size="30" src="https://07akioni.oss-cn-beijing.aliyuncs.com/07akioni.jpeg" />
      </n-badge> -->

      <!-- 窗口按钮 -->
      <div class="windowBtn">
        <n-button-group size="small">
          <n-button @click="minimize" type="tertiary" quaternary :focusable="false">
            <template #icon>
              <i class="iconfont icon-zuixiaohua_huaban1"></i>
            </template>
          </n-button>
          <n-button @click="maximize" type="tertiary" quaternary :focusable="false">
            <template #icon>
              <i class="iconfont" :class="maximizeIcon"></i>
            </template>
          </n-button>
          <n-button @click="hideWindow" type="error" quaternary :focusable="false">
            <template #icon>
              <i class="iconfont icon-guanbi"></i>
            </template>
          </n-button>
        </n-button-group>
      </div>
    </div>
  </n-layout-header>
</template>

<script setup>
import { reactive, ref } from 'vue';

const { ipcRenderer } = window.electron;


// 头像红色数字便宜值
let offset = [-5, 5];

// 最大化和还原的图标切换变量
let maximizeIcon = ref('icon-jurassic_Window-max');

// 通知主进程让窗口最小化
function minimize() {
  ipcRenderer.send('user_minimize');
}

// 通知主进程让窗口最大化(或者还原窗口大小)
function maximize() {
  ipcRenderer.send('user_maximize');
}

// 隐藏窗口
function hideWindow() {
  ipcRenderer.send('user_win-hide');
}

// 监听窗口最大化更新(或者还原)
ipcRenderer.on('update-maximize', (event, data) => {
  if (data) {
    maximizeIcon.value = 'icon-jurassic_Window-min';
    return;
  }
  maximizeIcon.value = 'icon-jurassic_Window-max';
});

</script>

<style lang="scss" scoped>
.content {
  width: 100%;
  height: 50px;
  background-color: #fff;
  display: flex;
  align-items: center;

  // 可以拖动
  -webkit-app-region: drag;

  // 通知的盒子
  .notice-box {
    display: flex;
    align-items: center;
    flex: 1;

    // 通知
    .notice {
      width: 50px;
      height: 100%;
      font-size: 30px;
      text-align: center;
      color: #353d44;
    }


    .scrolling-text-container {
      width: 100%;
      /* 容器的宽度 */
      height: 50px;
      /* 容器的高度 */
      overflow: hidden;
      /* 超出部分隐藏 */
      display: flex;
      align-items: center;

      // 通知字体滚动
      .scrolling-text {
        flex: 1;
        white-space: nowrap;
        /* 禁止换行 */
        animation: scrolling 10s linear infinite;
        /* 滚动动画设置 */
      }
    }



    @keyframes scrolling {
      0% {
        transform: translateX(100%);
        /* 初始位置 */
      }

      100% {
        transform: translateX(-50%);
        /* 滚动至最左侧 */
      }
    }
  }

  // 窗口按钮组
  .windowBtn {
    // 禁止拖动
    -webkit-app-region: no-drag;

    margin: 0 15px;
  }

}
</style>